<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <style>
        .angular-google-map{
            height:100%;
            width:100%;
        }
        .angular-google-map-container {
            width: 100%;
            height:100%;
        }
        .marker_labels{
            color:white;
        }
    </style>
  </head>

  <body ng-controller="MainCtrl">
    <div class="map" style="height:400px;position:relative;width:400px;">
        <!-- PROPERTY WINDOW ON GOOGLE MAP -->
        <div ng-hide='true'>
            <div id="infobox" class="infobox" style="background-color:white;border:solid 1px black;">
                <p>M # {{infoBoxProperty.id}}</p>
            </div>
        </div>
        <!-- /PROPERTY WINDOW ON GOOGLE MAP -->
        <!-- GOOGLE MAP -->
        <ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" draggable="true" control="map.control" events="map.events">
            <ui-gmap-circle center="map.me.center" stroke="map.me.stroke" fill="map.me.fill" radius="map.me.radius"
                visible="map.me.visible" geodesic="map.me.geodesic" editable="map.me.editable" draggable="map.me.draggable" clickable="map.me.clickable" control="map.me.control" events="map.me.events">
            </ui-gmap-circle>
        </ui-gmap-google-map>
        <!-- /GOOGLE MAP -->
    </div>
    <div class="well"><p ng-repeat="msg in debug_message track by $index">{{msg}}</p></div>
    <div>
        <p ng-if="markerInfos">
            <span ng-bind="markerInfos.id"></span>
        </p>
    </div>

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="../bower_components/lodash/lodash.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
    <script>
        var app = angular.module('plunker', [
            'uiGmapgoogle-maps'
        ]);

        app.controller('MainCtrl', function($scope, uiGmapIsReady) {

            $scope.debug_message = []


            $scope.markersEvents = {
                click: function(marker, eventName, model, args){
                  $scope.markerInfos = {id: marker.model.id};
                  model.options.icon = {
                    url: "http://res.cloudinary.com/gocaza-ca/image/upload/e_sepia/v1439840872/pin-off_2x_usuneb.png",
                    size: new google.maps.Size(30,28),
                    scaledSize: new google.maps.Size(30,28),
                    origin: new google.maps.Point(0,0),
                    anchor: new google.maps.Point(0,28/2)
                  };
                },
                mouseover: function (marker) {
                    $scope.infoBoxProperty = marker.model;
                    $scope.infoBox.open(marker.map, marker);
                },
                mouseout: function (marker, eventName, model, args) {
                   $scope.infoBox.close();
                }
            };


            $scope.clusterEvents = {
              clusteringbegin: function (cluster) {
                  $scope.infoBox.close();
              }
            };

            $scope.spiderOptions = {
                keepSpiderfied:true
            };

            $scope.clusterOptions = {
                maxZoom:15,
                styles: [{
                  width: 50,
                  height: 50,
                  textColor: '#ffffff',
                  textSize: 15,
                  url:"http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0.2/images/m1.png"
                }],
                keepSpiderfied:true
            };

            $scope.map = {
                center: { latitude: 46.83245, longitude: -71.23267}, zoom: 11, bounds: {}, markers: [], dragging: false,
                events:
                {
                    zoom_changed: function(map){
                        if(map.getZoom() > 14){
                            $scope.map.doSpider = true;
                        }
                        else{
                            $scope.map.doSpider = false;
                        }
                    }
                },
                me:{
                  id: 1,
                  control:{},
                  center: {
                    latitude: 46.83245,
                    longitude: -71.23267
                  },
                  radius: 10*1000,
                  stroke: {
                      color: '#08B21F',
                      weight: 3,
                      opacity: 1
                  },
                  fill: {
                      //color: '#08B21F',
                      color: '#1D333C',
                      opacity: 0.1
                  },
                  geodesic: false, // optional: defaults to false
                  draggable: false, // optional: defaults to false
                  clickable: false, // optional: defaults to true
                  editable: true, // optional: defaults to false
                  visible: true, // optional: defaults to true
                  control: {},
                  events:{
                    dragend:function(circle, eventName, model, args){
                      console.log('Event - dragend', eventName)
                      $scope.debug_message.push('event: dragend')
                    },
                    radius_changed:function(circle, eventName){
                      console.log('Event - radius_changed', eventName)
                      $scope.debug_message.push('event: radius_changed')
                    },
                    center_changed:function(circle, eventName){
                      console.log('Event - center_changed', eventName)
                      $scope.debug_message.push('event: center_changed')
                    }
                  }
                }
            };

            uiGmapIsReady.promise().then(function (map_instances) {
                $scope.map.type = 'cluster';
                $scope.infoBox = new InfoBox({
                    disableAutoPan: true,
                    alignBottom: true,
                    content: document.getElementById('infobox'),
                    pixelOffset: new google.maps.Size(20, 0),
                    maxWidth: 350,
                    zIndex: null,
                    closeBoxURL: "",
                    isHidden: false,
                    enableEventPropagation: false
                 });

                var markers = [];
                for(var i = 0;i < 8;i++){
                    var image = {
                        url: "http://res.cloudinary.com/gocaza-ca/image/upload/v1439840872/pin-off_2x_usuneb.png",
                        size: new google.maps.Size(30,28),
                        scaledSize: new google.maps.Size(30,28),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0,28/2)
                    };
                    markers.push({
                        id: i,
                        coords:{
                            latitude: 46.83245,
                            longitude: -71.23267
                        },
                        options:{
                            labelClass: 'marker_labels',
                            labelContent: "M# " + i,
                            labelAnchor:'-3 10',
                            icon:image
                        }
                    });
                }
                $scope.map.markers = markers;
          });
        });
    </script>
  </body>

</html>
